<template>
  <!-- 在线用户管理 -->
    <div>
      <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
        <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>在线用户管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
        <div>
          <div style="margin: 10px 0">
            <!--    搜索区-->
            <div style="margin: 10px 0;display:flex;justify-content:start;">
             
              <div>
                <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">用户ID</span>
                <el-input v-model.number="s_userId" size="small" clearable placeholder="请输入id" prefix-icon="el-icon-search"
                  style="width: 200px;" />
              </div>
              <!-- <div>
                <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
                <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
  
                </el-select>
              </div> -->
           
              <div style="margin-right: 20px;margin-left: 20px;">
  
  
  
                <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;"
                  size="small">搜索</el-button>
                <el-button icon="el-icon-refresh-left" style="margin-left: 5px;" @click="reset" size="small">重置</el-button>
              </div>
  
              <div>
                <download-excel
                  class="export-excel-wrapper"
                  :data="tableData"
                  :fields="json_fields"
                  type="xls"
                  worksheet="My Worksheet"
                  name="用户信息"
      >
        <el-button style="background-color: #143371; color: aliceblue;"
                  size="small">导出</el-button>
      </download-excel>
              </div>
            </div>
          </div>
  
          <!--    表格-->
          <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%" :row-style="{ height: '32px' }"
            :cell-style="{ padding: '4px' }">
  
           
            <el-table-column label="#" type="index" />
            <el-table-column label="用户ID" prop="userId" />
            <el-table-column label="IP地址" prop="ipAddress" width="180px" />
            <el-table-column label="登录地址" prop="location" />
            <el-table-column label="设备类型" prop="clientType" />
            <el-table-column label="浏览器" prop="browserType"/>
            <el-table-column label="操作系统" prop="osType"/>
            <el-table-column label="最近登录时间" prop="loginTime" sortable width="200px" />
<!--   
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag v-if="!scope.row.status" type="danger">封禁</el-tag>
                <el-tag v-else type="primary">正常</el-tag>
               
              </template>
            </el-table-column> -->
  
            <!--      操作栏-->
            <el-table-column label="操作" width="150px">
              <template slot-scope="scope">
                <el-button  size="mini" type="danger" @click="handleStatus(scope.$index, scope.row,false)">强退</el-button>
                <!-- <el-button v-else size="mini" type="primary" @click="handleStatus(scope.$index, scope.row,true)">解禁</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div style="margin: 10px 0">
            <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
              layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
  
        </div>
      </el-card>
    </div>
  </template>
  <script>
  import request from '@/utils/request'
  export default {
    name: "UserInfo",
    data() {
  
  
  
      return {
        s_userId:null,
        options: [
          {
            value: 0,
            label: '封禁中'
          },
          {
            value: 1,
            label: '正常'
          },
         
        ],
        value: '',
        loading: true,
        editJudge: true,
        judge: false,
        dialogVisible: false,
        search: "",
        currentPage: 1,
        pageSize: 10,
        total: 0,
        CoverdialogVisible: false,
        MoredialogVisible: false,
        json_fields:{
          用户ID:'userId',
          IP地址:'ipAddres',
          登录地址:'location',
          浏览器:'browserType',
          操作系统:'osType',
          设备类型:'clientType',
          最近登录时间:'loginTime',
          账号状态:{
            field: "status",
            //自定义回调函数
            callback: value => {
              if(value==0){
                return '封禁'
              }
              else{
                return '正常'
              }
            }
          }
        },
        tableData: [
          {
            userId: 1,
            ipAddress: '192.168.244.1',
            location: '江西南昌',
            browserType: 'Chrome 11',
            osType: 'win 10',
            clientType: 'PC',
            status: 1,
            loginTime: '2021-11-2 10:00:11',
          }
        ],
  
  
        editDisplay: {
          display: "block",
        },
        display: {
          display: "none",
        },
      };
    },
    created() {
      this.load();
      this.loading = true;
      setTimeout(() => {
        //设置延迟执行
        this.loading = false;
      }, 1000);
    },
    methods: {
      handleStatus(index, row, status) {
        this.$confirm("你确定有封禁"+row.userId+"吗？",{
          iconClass: "el-icon-question", //自定义图标样式
          confirmButtonText: "残忍删除", //确认按钮文字
          cancelButtonText: "取消删除", //取消按钮文字
          showClose: true, //是否显示右上角关闭按钮
          type: "warning", //提示类型  success/info/warning/error
        }).then(()=>{
          this.tableData[index].status = status
        }).catch(()=>{
          alert("取消")
        })
       
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
  
      },
      handleCover(res, file, fileList) {
  
      },
      handleMoreImages(res, file, fileList) {
  
      },
      handleExceed() {
        this.$message.warning(`只允许上传一张图片`);
      },
      async load() {
        request.get("/online-user/find", {
              params: {
                  pageNum: this.currentPage,
                  pageSize: this.pageSize,
                  userId: this.s_userId,
              },
          }).then((res) => {
              console.log(res);
              this.tableData = res.data.list;
              this.total = res.data.total;
              this.loading = false;
          });
      },
      reset() {
        this.s_userId = null
        this.load()
        // this.search = ''
        // request.get("/student/find", {
        //     params: {
        //         pageNum: 1,
        //         pageSize: this.pageSize,
        //         search: this.search,
        //     },
        // }).then((res) => {
        //     console.log(res);
        //     this.tableData = res.data.records;
        //     this.total = res.data.total;
        //     this.loading = false;
        // });
      },
      handleDelete(index, row) {
        // 确认框确认是否要删除
        this.$confirm("确定要删除" + row.stuName + "的信息吗?", "删除提示", {
          iconClass: "el-icon-question", //自定义图标样式
          confirmButtonText: "残忍删除", //确认按钮文字
          cancelButtonText: "取消删除", //取消按钮文字
          showClose: true, //是否显示右上角关闭按钮
          type: "warning", //提示类型  success/info/warning/error
        }).then(() => {  //选择确认按钮进入此方法
          request.delete("student/delete/" + row.stuId).then(res => {
            console.log(row.stuId)
            if (res.code === "1") {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.load()
            }
            else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }).catch(() => { //选择取消按钮进入此方法
          //取消操作
          alert('取消')
        });
      },
      handleEdit(index, row) {
        this.judge = true;
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs.form.resetFields();
          this.form = JSON.parse(JSON.stringify(row));
          this.editDisplay = { display: "block" };
        });
      },
      cancel() {
        this.$refs.form.resetFields();
        this.dialogVisible = false;
      },
      save() {
        this.$refs.form.validate(vaild => {
          if (vaild) {
            if (this.judge) {
              //先表单验证，再放put请求
              request.put("/student/update", this.form).then(res => {
                if (res.code === "1") {
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  })
                  this.search = "",
                    this.load();
                  this.dialogVisible = false
                }
                else {
                  this.$message({
                    type: 'error',
                    message: res.msg
                  })
                }
              })
  
  
            }
            else {
              //发post请求
              console.log(1)
              request.post("/student/add", this.form).then(res => {
                if (res.code === "1") {
                  this.$message({
                    type: 'success',
                    message: '添加成功'
                  })
                  this.search = "",
                    this.load();
                  this.dialogVisible = false
                }
                else {
                  this.$message({
                    type: 'error',
                    message: res.msg
                  })
                }
              })
            }
          }
        })
  
  
      },
      add() {
        this.dialogVisible = true;
        this.judge = false;
        this.form = {}
      },
      handleSizeChange(pageSize) {
        //改变每页个数
        this.pageSize = pageSize;
        this.load();
      },
      handleCurrentChange(pageNum) {
        //改变页码
        this.currentPage = pageNum;
        this.load();
      },
  
    }
  
  
  }
  </script>
  <style>
  .demo-table-expand {
    font-size: 0;
  }
  
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 80%;
    display: block;
  }
  </style>